<template>
    <div>
        <web-header show="company" />
        <div class="banner">
            <div class="center-1400">
                <div class="form_bj">
                    <ul>
                        <li><img src="https://admin.hqx.com.cn/Public/Travel/images/group/g_03.jpg" />快速提交需求</li>
                        <li class="le"><span>...</span>
                            <span></span>
                        </li>
                        <li><img src="https://admin.hqx.com.cn/Public/Travel/images/group/g_05.jpg" />免费获取方案</li>
                        <li class="le"><span>...</span>
                            <span></span>
                        </li>
                        <li><img src="https://admin.hqx.com.cn/Public/Travel/images/group/g_07.jpg" />沟通确认行程</li>
                        <li class="le"><span>...</span>
                            <span></span>
                        </li>
                        <li><img src="https://admin.hqx.com.cn/Public/Travel/images/group/g_09.jpg" />签约快乐出游</li>
                    </ul>
                </div>
                <div class="from_box">
                    <div class="top">
                        <b>旅游包团定制</b>
                        <span>1对1VIP定制服务</span>
                    </div>
                    <!-- <div class="form_tab">
                        <ul>
                            <li class="active">公司包团</li>
                            <li>个人/小团体定制</li>
                        </ul>
                    </div> -->
                    
                    <div class="form">
                        <form>
                            <input name="action_type" type="hidden" value="dinzhi" />
                            <div class="add">
                                <span class="cfd">出发</span>
                                <span class="cfd_value">深圳</span>
                                <span class="jt">——</span>
                                <span class="cfd">目的地</span>
                                <span class="mdd_input">
                                    <input v-model="formData.question" name="area" type="text" />
                                </span>
                            </div>
                            <div class="add">
                                <span class="cfd">人数</span>
                                <span class="mdd2_input">
                                    <input v-model="formData.nums" name="nums" type="text" />
                                </span>
                                <span class="cfd">预算</span>
                                <span class="mdd2_input">
                                    <input v-model="formData.price" name="price" type="text" />
                                </span>
                            </div>
                            <div class="add">
                                <span class="cfd">联系方式</span>
                                <span class="mdd3_input">
                                    <input v-model="formData.tel" required name="tel" type="text" />
                                </span>
                            </div>
                            <div @click="axios_demand_add" class="button">
                                <!-- <input class="submit" value="立刻获取 达人定制方案" name="submit" type="submit"> -->
                                <a href="javascript:void(0)"
                                    style="background-color: #007AFF;height: 45px;text-align: center;line-height: 42px;border-radius: 50px;margin-top: 35px;color: #fff;display: block;border: none;width: 100%;">
                                    立刻获取 达人定制方案</a>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="list">
                    <dl>
                        <dt><img src="https://admin.hqx.com.cn/Public/Group/img/top_icon1.png" /></dt>
                        <dd>
                            <h3>匠心创新</h3>
                            <span>私人专属金牌旅游专家1对1服务</span>
                        </dd>
                    </dl>
                    <dl>
                        <dt><img src="https://admin.hqx.com.cn/Public/Group/img/top_icon2.png" /></dt>
                        <dd>
                            <h3>科技赋能</h3>
                            <span>性价比完美行程,全程安排私密别墅、高端品牌一线酒店</span>
                        </dd>
                    </dl>
                    <dl>
                        <dt><img src="https://admin.hqx.com.cn/Public/Group/img/top_icon3.png" /></dt>
                        <dd>
                            <h3>安全保障</h3>
                            <span>专业的车队、技术娴熟的司机、紧急联络服务，让您安心出游</span>
                        </dd>
                    </dl>
                    <dl>
                        <dt><img src="https://admin.hqx.com.cn/Public/Group/img/top_icon4.png" /></dt>
                        <dd>
                            <h3>定制服务</h3>
                            <span>深度结合组织发展需求 </span>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="title_a">
            <dl>
                <dt>包团长线行程</dt>
                <dd>不要眨眼，还有N种好玩的兴趣主题，等你来探索,<br />我们是启发旅游灵感的网站，为你解决去哪玩的问题。不信？ 现在就来搜一搜，灵感马上来。</dd>
            </dl>
        </div>
        <div class="nav_a">
            <ul>
                <li v-for="rs in areasDomestic" :key="rs.id" @mouseenter="hotChange(rs.title)">
                    <a :class="hotIndex == rs.title ? 'active' : ''" href="javascript:void(0)">{{rs.title}}</a>
                </li>
                <!-- <li @mouseenter="hotChange('Hot')">
                    <a :class="hotIndex == 'Hot' ? 'active' : ''" href="javascript:void(0)">热门推荐</a>
                </li>
                <li @mouseenter="hotChange('a')">
                    <a :class="hotIndex == 'a' ? 'active' : ''" href="javascript:void(0)">青甘线</a>
                </li>
                <li @mouseenter="hotChange('b')">
                    <a :class="hotIndex == 'b' ? 'active' : ''" href="javascript:void(0)">东北线</a>
                </li>
                <li @mouseenter="hotChange('c')">
                    <a :class="hotIndex == 'c' ? 'active' : ''" href="javascript:void(0)">华东线</a>
                </li>
                <li @mouseenter="hotChange('d')">
                    <a :class="hotIndex == 'd' ? 'active' : ''" href="javascript:void(0)">新疆内蒙线</a>
                </li>
                <li @mouseenter="hotChange('e')">
                    <a :class="hotIndex == 'e' ? 'active' : ''" href="javascript:void(0)">西南线</a>
                </li> -->
            </ul>
        </div>
        <div class="box_bg">
            <template v-for="(rs, key) in hotList" :key="key">
                <!-- {{ key }} -->
                <!-- {{ hotIndex }} -->
                <template v-if="key == hotIndex">
                    <div class="box_b">
                        <div class="lista">
                            <router-link :to="`/details/${rs[0]?.id}`">
                                <div class="pic">
                                    <img :src="rs[0]?.picture" />
                                </div>
                                <div class="days">{{ rs[0]?.line_days }}天</div>
                                <div class="title">
                                    <h3>{{ rs[0]?.title }}</h3>
                                    <span>{{ rs[0]?.intro }}</span>
                                    <span>￥{{ rs[0]?.price }}元/人起</span>
                                </div>
                            </router-link>
                        </div>

                        <div class="listb">
                            <router-link :to="`/details/${rs[1]?.id}`">
                                <dl>
                                    <dt>
                                        <img :src="rs[1]?.picture" />
                                        <div class="days">{{ rs[1]?.line_days }}天</div>
                                        <div class="price">￥{{ rs[1]?.price }}元/人起</div>
                                    </dt>
                                    <dd>
                                        <h3 class="clamp-line-3" style="height: 130px;">{{ rs[1]?.title }}</h3>
                                        <span>{{ rs[1]?.intro }}</span>
                                    </dd>
                                </dl>
                            </router-link>
                        </div>
                        <div class="listb">
                            <router-link :to="`/details/${rs[2]?.id}`">
                                <dl>
                                    <dt>
                                        <img :src="rs[2]?.picture" />
                                        <div class="days">{{ rs[2]?.line_days }}天</div>
                                        <div class="price">￥{{ rs[2]?.price }}元/人起</div>
                                    </dt>
                                    <dd>
                                        <h3 class="clamp-line-3" style="height: 130px;">{{ rs[2]?.title }}</h3>
                                        <span>{{ rs[2]?.intro }}</span>
                                    </dd>
                                </dl>
                            </router-link>
                        </div>

                        <div class="listc">
                            <router-link :to="`/details/${rs[3]?.id}`">
                                <div class="pic">
                                    <img :src="rs[3]?.picture" />
                                </div>
                                <div class="days">{{ rs[3]?.line_days }}天</div>
                                <div class="title">
                                    <h3 class="clamp-line-1" style="width: 230px; display: -webkit-box;">{{ rs[3]?.title
                                        }}</h3>
                                    <span>{{ rs[3]?.price }}元/人起</span>
                                </div>
                            </router-link>
                        </div>
                        <div class="listc">
                            <router-link :to="`/details/${rs[4]?.id}`">
                                <div class="pic">
                                    <img :src="rs[4]?.picture" />
                                </div>
                                <div class="days">{{ rs[4]?.line_days }}天</div>
                                <div class="title">
                                    <h3 class="clamp-line-1" style="width: 230px; display: -webkit-box;">{{ rs[4]?.title
                                        }}</h3>
                                    <span>{{ rs[4]?.price }}元/人起</span>
                                </div>
                            </router-link>
                        </div>
                        <div class="listc">
                            <router-link :to="`/details/${rs[5]?.id}`">
                                <div class="pic">
                                    <img :src="rs[5]?.picture" />
                                </div>
                                <div class="days">{{ rs[5]?.line_days }}天</div>
                                <div class="title">
                                    <h3 class="clamp-line-1" style="width: 230px; display: -webkit-box;">{{ rs[5]?.title
                                        }}</h3>
                                    <span>{{ rs[5]?.price }}元/人起</span>
                                </div>
                            </router-link>
                        </div>

                        <div class="listc">
                            <div class="link">
                                <router-link v-for="item in citys[key]"  :to="`/company/list/${item.id}`">{{item.title}}</router-link>
                                <!-- <router-link  to="/company/list/75">华东</router-link>
                                <router-link  to="/company/list/76">海南</router-link>
                                <router-link  to="/company/list/78">湖南</router-link>
                                <router-link  to="/company/list/79">云南</router-link>
                                <router-link  to="/company/list/172">新疆</router-link>
                                <router-link  to="/company/list/175">北京</router-link>
                                <router-link  to="/company/list/145">广州</router-link> -->
                            </div>
                            <div class="more">
                                <router-link  to="/company/list/145">查看更多..</router-link>
                            </div>
                        </div>
                    </div>
                </template>
            </template>
        </div>
        <div class="baotuan3">
            <div class="baotuan3box">
                <div class="titlebox">
                    <h1>包团短线热门推荐</h1>
                    <p>没有旅行灵感？看看定制师定制的案例吧</p>
                    <ul>
                        <li @mouseenter="shortChange('huizhou')" :class="shortIndex == 'huizhou' ? 't3' : ''">惠州</li>
                        <li @mouseenter="shortChange('heyuan')" :class="shortIndex == 'heyuan' ? 't3' : ''">河源</li>
                        <li @mouseenter="shortChange('qingyuan')" :class="shortIndex == 'qingyuan' ? 't3' : ''">清远</li>
                        <li @mouseenter="shortChange('shenzhen')" :class="shortIndex == 'shenzhen' ? 't3' : ''">深圳</li>
                        <li @mouseenter="shortChange('guanzhou')" :class="shortIndex == 'guanzhou' ? 't3' : ''">广州</li>
                        <li @mouseenter="shortChange('jiangmen')" :class="shortIndex == 'jiangmen' ? 't3' : ''">江门</li>
                    </ul>
                </div>
                <div class="baotuan3list">
                    <template v-for="(rs, index) in shortList" :key="rs.index">
                        <dl v-if="shortIndex == index">
                            <dd v-for="(item) in rs" :key="item.id">
                                <div class="list3">
                                    <div class="imgbox3">
                                        <router-link :to="`/details/${item.id}`">
                                            <img width="285" height="140" :src="item.picture">
                                            <input type="button" class="day3" :value="`${item.line_days}天`">
                                            <div class="add3">
                                                <img
                                                    src="https://admin.hqx.com.cn/Public/Travel/images/company/baotuan2_02bai.png">
                                                <h2></h2>
                                                <h3>￥<span>{{ item.price }}</span>/人起</h3>
                                            </div>
                                        </router-link>
                                    </div>
                                    <div class="txtbox3">
                                        <router-link :to="`/details/${item.id}`">
                                            <h1>{{ item.title }}</h1>
                                        </router-link>
                                        <p>{{ item.intro }} </p>
                                    </div>
                                </div>
                            </dd>
                        </dl>
                    </template>
                </div>
            </div>
        </div>
        <div style="background-color: #fff;">
            <div class="baotuan5" style="background-color: #fff;">
                <div class="title">
                    <h1>包团定制 PK 传统跟团游</h1>
                    <h2>大项目小项目，我们都花100%的精力去完成。我们旨在为每一个客户提供真正有价值的服务产品！</h2>
                </div>
                <div class="baotuan5box">
                    <div class="list5box1">
                        <h1>公司包团\私人定制</h1>
                        <p style="width:300px;">提供全部旅游安排和导游服务，使旅游者具有安全感</p>
                        <p style="width:450px;">包价旅游意味着旅游者不得不放弃自己的个性而适应团体的共性</p>
                        <p style="width:410px;">可以获得较优惠的价格、预知旅游费用</p>
                        <p style="width:380px;">旅游团内保持熟悉的氛围</p>
                        <p style="width:380px;">包团游 一价全包 无任何购物自费</p>
                        <p style="width:330px;">想去的地方多点</p>
                        <p style="width:280px;">针对性强，效果好</p>
                        <p style="width:260px;">好玩、有趣比较利于放松 </p>
                    </div>
                    <div class="list5box2">
                        <h1>PK</h1>
                        <p>01</p>
                        <p>02</p>
                        <p>03</p>
                        <p>04</p>
                        <p>05</p>
                        <p>06</p>
                        <p>07</p>
                        <p>08</p>
                    </div>
                    <div class="list5box3">
                        <h1>普通跟团游、半自助游</h1>
                        <p style="width:300px;">想去的地方多点</p>
                        <p style="width:450px;">项目形式过于固定针对性不强</p>
                        <p style="width:410px;">随性一些，相对旅游花费的费用也高</p>
                        <p style="width:380px;">吃饭根据导游确定，拉哪吃哪</p>
                        <p style="width:380px;">时间根据团队安排，要求限时</p>
                        <p style="width:330px;">住宿跟据能力选择，档次不同</p>
                        <p style="width:280px;">策划周期长费用较高</p>
                        <p style="width:260px;">效果难以把控</p>
                    </div>
                </div>
            </div>
        </div>
        <web-footer />
    <back-top />
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { index_banner, line_items, theme_items, other_demand_add } from "@/api/travel";
import { ElMessage, ElMessageBox } from 'element-plus'
import areasDomestic from '@/assets/dictionaries/areasDomestic.js'

let citys = ref({});
areasDomestic.forEach(item=>{
    citys.value[item.title] = item.areas;
})

// line_items 简化
let getItem = async (ids, limit = 10) => {
    let res = await line_items({
        ids,
        limit
    });
    return res.data;
};

let getItemArea = async (area, limit = 5, line_type = 2) => {
    let res = await line_items({
        area,
        limit,
        line_type
    });

    return res.data;
};
let getItemDes = async (des, limit = 6) => {
    let res = await line_items({
        des,
        limit
    });

    return res.data;
};

let formData = ref({
    question: '',
    nums: '',
    price: '',
    tel: '',

});
const axios_demand_add = async () => {
    // 检查手机号
    if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(formData.value.tel)) {
        // console.log('手机号格式错误')
        ElMessageBox.alert('手机号格式错误', '提示', {
            // if you want to disable its autofocus
            // autofocus: false,-
            confirmButtonText: '确定',
            callback: (action) => {

            },
        })
        return;
    } 
    let res = await other_demand_add(formData.value);
}


// 包团长线行程 
let hotList = ref({});
// 请求热门数据  待完善
let getHotList = async () => {
    hotList.value = {
        "西南": await getItem("7944,7943,7942,7933,7932,7925"),
        "西北": await getItem("7963,7957,7743,7539,7537,7530"),
        "华北": await getItem("7953,7952,7798,7797,7796,7597"),
        "华东": await getItem("7650,6776,6775,6774,6635,6389"),
        "华南": await getItem("7946,7945,6617,6616,6615,6614"),
        "华中": await getItem("7523,7520,7266,7265,7264,7257"),
        "东北": await getItem("7956,7911,7908,7907,6746,6744"),
    };
};
// 下标
let hotIndex = ref('西南');
// 切换函数
let hotChange = async (index) => {
    hotIndex.value = index;
};



// 包团短期行程 
let shortList = ref({});
// 请求热门数据
let getShortList = async () => {
    let huizhou = await getItemArea(138); //惠州
    let heyuan = await getItemArea(134); //河源
    let qingyuan = await getItemArea(132); //清远
    let shenzhen = await getItemArea(143); //深圳
    let guanzhou = await getItemArea(145); //广州
    let jiangmen = await getItemArea(146); //江门

    shortList.value = {
        huizhou,
        heyuan,
        qingyuan,
        shenzhen,
        guanzhou,
        jiangmen,
    };
};

// 包团短期线路
let shortIndex = ref('huizhou');
// 切换函数
let shortChange = async (index) => {
    shortIndex.value = index;
};



onMounted(async () => {
    await getHotList();
    await getShortList();
    
console.log(hotList.value)

});

</script>

<style lang="scss" scoped>
@import "../../css/main_company_index3.css";
</style>
